<template>
  <div class="box">
    <div class="biggerBlock">
      <div class="bigBlock">
        <div class="blockUp">
          <div class="circle">
            <div class="theCircle" :style='{ backgroundColor: theColorList[0] }'></div>
          </div>
          <div class="name">{{ data[0].name }}</div>
        </div>
        <div class="blockDown">
          <span class="amount">{{ dataHandled[0] }}</span>
          <span class="percent"> {{ `${perOne}%` }} </span>
        </div>
      </div>
      <div class="bigBlock">
        <div class="blockUp">
          <div class="circle">
            <div class="theCircle" :style='{ backgroundColor: theColorList[1] }'></div>
          </div>
          <div class="name">{{ data[1].name }}</div>
        </div>
        <div class="blockDown">
          <span class="amount">{{ dataHandled[1] }}</span>
          <span class="percent">{{ `${perTwo}%` }}</span>
        </div>
      </div>
    </div>
    <div class="doubleDeck" :id=id
      :style="{ height: '260px', width: '260px', backgroundImage: 'url(' + innerContentExist + ')' }"></div>
    <div class="biggerBlock">
      <div class="bigBlock">
        <div class="blockUp">
          <div class="circle">
            <div class="theCircle" :style='{ backgroundColor: theColorList[2] }'></div>
          </div>
          <div class="name">{{ data[2].name }}</div>
        </div>
        <div class="blockDown">
          <span class="amount">{{ dataHandled[2] }}</span>
          <span class="percent">{{ `${perThree}%` }}</span>
        </div>
      </div>
      <div class="bigBlock">
        <div class="blockUp">
          <div class="circle">
            <div class="theCircle" :style='{ backgroundColor: theColorList[3] }'></div>
          </div>
          <div class="name">{{ data[3].name }}</div>
        </div>
        <div class="blockDown">
          <span class="amount">{{ dataHandled[3] }}</span>
          <span class="percent">{{ `${perFour}%` }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, computed } from 'vue';

import filledDoubleDeck from '@/assets/images/filledDoubleDeck.png';

const props = defineProps({
  data: Object,
})
const id = props.data.id;
const data = props.data.data;
const sum = props.data.sum;
const theColorList = props.data.theColorList;
const innerContent = props.data.innerContent

let innerContentExist = computed(() => {
  if (innerContent === undefined) {
    return filledDoubleDeck
  } else {
    return ''
  }
})

let dataHandled = computed(() => {
  let dataArr = [];
  for (let j = 0; j <= data.length - 1; j++) {
    let result = [], counter = 0;
    let theData = data[j].value.toString();
    let num = theData;
    for (let i = num.length - 1; i >= 0; i--) {
      counter++;
      result.unshift(num[i]);
      if (!(counter % 3) && i != 0) { result.unshift(','); }
    }
    let theValue = result.join('');
    dataArr.push(theValue);
  }
  return dataArr
})

const perOne = computed(() => {
  const avg = data[0].value;
  return (avg * 100 / sum).toFixed(1)
})
const perTwo = computed(() => {
  const avg = data[1].value;
  return (avg * 100 / sum).toFixed(1)
})
const perThree = computed(() => {
  const avg = data[2].value;
  return (avg * 100 / sum).toFixed(1)
})
const perFour = computed(() => {
  const avg = data[3].value;
  return (avg * 100 / sum).toFixed(1)
})

onMounted(() => {
  getPie()
})
const getPie = () => {
  var chartDom = document.getElementById(id);
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    color: theColorList,
    tooltip: {
      trigger: 'item',
      formatter: (params) => {
        return `  <div style="display: flex;align-items: center;">
                    <div><div style='margin-right: 5px;background-color:${theColorList[params.dataIndex]};height:10px;width:10px;border-radius:50%'></div></div>
                    <div style='margin-right: 15px;'>${params.name}</div>
                    <div style='font-weight:bold'>${dataHandled.value[params.dataIndex]}</div>
                  </div>`
      }
    },
    series: [
      {
        clockwise: false,
        zlevel: 1,
        type: 'pie',
        selectedMode: 'single',
        startAngle: 50,
        padAngle: 5,
        radius: ['50%', '60%'],
        label: {
          show: false,
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          color: '#666666'
        },
        emphasis: {
          itemStyle: {
            opacity: 0,
          }
        },
        data: data
      },
      {
        clockwise: false,
        zlevel: -1,
        type: 'pie',
        selectedMode: 'single',
        startAngle: 50,
        padAngle: 5,
        radius: ['50%', '60%'],
        label: {
          show: true,
          position: 'center',
          color: '#ffffff',
          formatter: (params) => {
            if (innerContent != undefined) {
              return `{font|${innerContent.text}}\n\n{a|${innerContent.value}}`
            } else {
              return ''
            }
          },
          rich: {
            font: {
              color: '#ffffffc0',
              fontFamily: 'PingFang-Medium'
            },
            a: {
              fontSize: 18,
              fontWeight: 600,
              fontFamily: 'PingFang-Bold'
            }
          }
        },
        labelLine: {
          show: false
        },
        itemStyle: {
          color: (params) => {
            const x1 = [1, 0, 0, 0];
            const y1 = [0, 0, 0, 1];
            const x2 = [0, 0, 1, 0];
            const y2 = [0, 1, 0, 0];
            return new echarts.graphic.LinearGradient(x1[params.dataIndex], y1[params.dataIndex], x2[params.dataIndex], y2[params.dataIndex], [
              { offset: 0, color: '#ffffff' },
              { offset: 1, color: `${theColorList[params.dataIndex]}` },
            ])
          }
        },
        emphasis: {
        },
        data: data
      },
      {
        clockwise: false,
        zlevel: 1,
        type: 'pie',
        startAngle: 50,
        padAngle: 5,
        radius: ['60%', '85%'],
        labelLine: {
          show: false
        },
        label: {
          position: 'inner',
          fontSize: 12,
          rotate: 'tangential',
          fontFamily: "PingFang-Medium"
        },
        labelLayout: (params) => {
          const theIndex = params.dataIndex;
          if (theIndex != 2) {
            return { verticalAlign: 'top' }
          } else {
            return { verticalAlign: 'bottom' }
          }
        },
        itemStyle: {
          color: '#263448'
        },
        emphasis: {
          itemStyle: {
            opacity: 0,
          }
        },
        data: data
      },
      {
        clockwise: false,
        zlevel: -1,
        type: 'pie',
        startAngle: 50,
        padAngle: 5,
        radius: ['60%', '85%'],
        labelLine: {
          show: false
        },
        label: {
          show: false,
        },
        itemStyle: {
          color: (params) => {
            const x1 = [1, 0, 0, 0];
            const y1 = [0, 0, 0, 1];
            const x2 = [0, 0, 1, 0];
            const y2 = [0, 1, 0, 0];
            return new echarts.graphic.LinearGradient(x1[params.dataIndex], y1[params.dataIndex], x2[params.dataIndex], y2[params.dataIndex], [
              { offset: 0, color: '#ffffff40' },
              { offset: 1, color: `${theColorList[params.dataIndex]}80` },
            ])
          }
        },
        emphasis: {
        },
        data: data
      }
    ]
  };
  myChart.on('mouseover', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'highlight',
      dataIndex: params.dataIndex,
      seriesIndex: 0,
    });
  });
  myChart.on('mouseover', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'highlight',
      dataIndex: params.dataIndex,
      seriesIndex: 2,
    });
  });
  myChart.on('mouseout', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'downplay',
      dataIndex: params.dataIndex,
      seriesIndex: 0,
    });
  });
  myChart.on('mouseout', 'series.pie', function (params) {
    myChart.dispatchAction({
      type: 'downplay',
      dataIndex: params.dataIndex,
      seriesIndex: 2,
    });
  });
  option && myChart.setOption(option);
}


</script>
<style scoped>
.doubleDeck {
  /* background-image: url('@/assets/images/filledDoubleDeck.png'); */
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}

.box {
  display: flex;

  padding-inline: 14px;
}

.biggerBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  color: white;

  line-height: 40px;
}

.bigBlock {
  display: flex;
  flex-direction: column;
}

.blockUp {
  display: flex;
  gap: 10px;
  align-items: center;
  color: #ffffffc0;
  font-family: "PingFang-Medium"
}

.name {
  color: #ffffffc0
}

.blockDown {
  display: flex;
  gap: 10px;
  justify-content: end;
  font-family: "PingFang-Bold"
}

.blockDown::before {
  content: '';
  margin-right: 15px;
}


.circle {
  height: 18px;
  width: 18px;

  display: flex;
  justify-content: center;
  align-items: center;
}

.theCircle {
  height: 7px;
  width: 7px;
  border-radius: 50%;
}
</style>